<template>
    <div>
        <Row :gutter="10">
            <Col>
                <Card>
                    <Row class="live_wrapper clearfix">
                        <Button type="primary" style="float:right;width:90px;height: 34px;font-size: 14px;" @click="addCate">添加</Button>
                        <Input v-model="filter.name" @on-search="search" search enter-button="查询" placeholder="请输入分类名称"
                               style="width:290px; margin-right: 10px;float: right;top:0;font-size: 14px;"/>
                    </Row>
                    <Row class="margin-top-10 table_pattern table_pattern2">
                        <Table :loading="loading" :columns="columns" :data="list"></Table>
                    </Row>
                    <Row class="margin-top-10">
                        <Page :total="pagenation.totalPage" :page-size="pagenation.perPage"
                              :current="pagenation.currentPage" show-elevator show-total @on-change="change"></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal v-model="edit" :title="title" width="500px" :mask-closable="false" class="goods_modal" :z-index='100'>
            <Form :model="formValidate" ref="formValidate" :label-width="100">
                <FormItem label="分类名称" prop="name" class="label_required">
                    <Input v-model="formValidate.name" placeholder="请输入分类名称" style='width:60%'/>
                </FormItem>
                <FormItem>
                    <Button :loading="saving" type="primary" @click="handleSubmit" style="width: 90px;height: 35px;border-radius: 0;font-size: 14px;">提交</Button>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import config from '@/config'
    import { cateList, editCate, changeCateStatus} from '@/api/main'
    export default {
        data() {
            return {
                pagenation: {},
                columns: [
                    {
                        key: 'name',
                        title: '名称',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.name)
                        },
                    },
                    {
                      key: 'status',
                      title: '状态',
                      width: 150,
                      align: 'center',
                      render: (h, params) => h('i-switch', {
                        props: {
                          value: params.row.status,
                          size: 'large',
                          'true-value': 1,
                          'false-value': 0
                        },
                        on: {
                          'on-change': () => {
                            this.changeCateStatus(params.row)
                          }
                        }
                      }, [
                        h('span', {
                          slot: 'open',
                          domProps: {
                            innerHTML: '开启'
                          }
                        }),
                        h('span', {
                          slot: 'close',
                          domProps: {
                            innerHTML: '关闭'
                          }
                        })
                      ]
                      )
                    },
                    {
                        key: 'created_time',
                        title: '创建时间',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.created_time)
                        },
                    },
                    {
                        title: '操作',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                              h(
                                  'Button',
                                  {
                                      style: {
                                          marginBottom: '5px',
                                          marginRight: '5px',
                                          border:0,
                                          background:'transparent',
                                          fontSize:'14px',
                                          color:'#377EEF'
                                      },
                                      on: {
                                          click: () => {
                                            this.editCate(params.row)
                                          },
                                      },
                                  },
                                  '编辑',
                              ),
                              h(
                                    'Poptip',
                                    {
                                        props: {
                                            confirm: true,
                                            title: '您确定要删除该分类吗?',
                                            transfer: true,
                                        },
                                        on: {
                                            'on-ok': () => {
                                                let obj = {}
                                                obj.id = params.row.id
                                                obj.status = -1
                                                changeCateStatus(obj).then(res => {
                                                    if (res.code === 0) {
                                                      this.$Message.success('操作成功')
                                                      this.init()
                                                    } else {
                                                        this.$Message.error(res.text)
                                                    }
                                                })
                                            },
                                        },
                                    },
                                    [
                                        h(
                                            'Button',
                                            {
                                                style: {
                                                    marginBottom: '5px',
                                                    border:0,
                                                    background:'transparent',
                                                    fontSize:'14px',
                                                    color:'#377EEF'
                                                },
                                                props: {
                                                    placement: 'top',
                                                    size: 'small',
                                                },
                                            },
                                            '删除',
                                        ),
                                    ],
                                ),
                            ])
                        },
                    },
                ],
                edit: false,
                title: '添加资讯分类',
                list: [],
                loading: true,
                saving: false,
                formValidate: {
                    id: 0,
                    name: '',
                    type: 1,
                },
                filter: {
                    page: 0,
                    name: '',
                    type: 1,
                },
            }
        },
        methods: {
            change: function(page) {
                this.loading = true
                this.filter.page = page-1
                this.init()
            },
            search: function () {
                this.filter.page = 0
                this.init()
            },
            addCate: function () {
              this.edit = true
              this.formValidate.id = 0
              this.title = '添加分类'
              this.handleReset('formValidate')
            },
            handleReset(name) {
                this.$refs[name].resetFields()
            },
            editCate: function(obj){
                this.formValidate = Object.assign({}, obj)
                this.title = '编辑分类'
                this.edit = true
            },
            changeCateStatus(item) {
              let obj = {}
              obj.id = item.id
              obj.status = parseInt(item.status) ? 0 : 1
              changeCateStatus(obj).then(res => {
                  if (res.code === 0) {
                    this.$Message.success('操作成功')
                    this.init()
                  } else {
                      this.$Message.error(res.text)
                  }
              })
            },
            handleSubmit() {
                if (this.formValidate.name == '') {
                    this.$Message.error("请输入分类名称");return;
                }
                editCate(this.formValidate).then(res => {
                    if (res.code === 0) {
                      this.$Message.success('操作成功')
                      this.edit = false
                      this.init()
                    } else {
                        this.$Message.error(res.text)
                    }
                })
            },
            init () {
                cateList(this.filter).then(res => {
                    if (res.code == 0) {
                        this.list = res.data
                        this.loading = false
                        this.pagenation.currentPage = parseInt(res.currentPage) + 1
                        this.pagenation.totalPage = parseInt(res.totalPage)
                        this.pagenation.perPage = parseInt(res.perPage)
                    }
                })
            }
        },
        mounted() {
            this.init();
        }
    }
</script>
